<template>
  <div id="merchant">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <!--查询表单-->
    <el-form :inline="true" :model="merchantInfo">
      <el-form-item label="昵称:">
        <el-input placeholder="请输入昵称关键字" v-model="merchantInfo.name">
        </el-input>
      </el-form-item>
      <el-form-item label="门店名称:">
        <el-input placeholder="请输入门店关键字" v-model="merchantInfo.shopName">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryMerchantInfo">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="merchantInfoAry"
              style="width: 100%"
              ref="multipleTable"
              tooltip-effect="dark">
      <el-table-column prop="merchantId" label="商户编号" plain>
        <template slot-scope="scope">
          <a href="#" @click.prevent="look(scope.row)">{{ scope.row.merchantId }}</a>
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="商户真实姓名">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号码">
      </el-table-column>
      <el-table-column
          prop="shopName"
          label="门店名称">
      </el-table-column>
      <el-table-column
          prop="address"
          label="门店地址">
      </el-table-column>
      <el-table-column
          prop="checkTag"
          label="审核状态">
        <template slot-scope="scope">
          <span v-if="scope.row.checkTag=='S001-1'">等待审核</span>
          <span v-if="scope.row.checkTag=='S001-2'">审核不通过</span>
          <span v-if="scope.row.checkTag=='S001-3'">审核通过</span>
        </template>
      </el-table-column>
      <!--操作列-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              round
              icon="el-icon-edit"
              @click="delMer(scope.row)" plain>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!-- 查看详细信息对话框 -->
    <el-dialog title="查看商户详细信息" :visible.sync="lookVisible">
      <el-form ref="form" :model="merchantInfoObj2" label-width="200px">
        <el-form-item label="商户编号" >
          <el-input v-model="merchantInfoObj2.merchantId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="关联前台编号" >
          <el-input v-model="merchantInfoObj2.sysUsersId" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="账户余额" >
          <el-input v-model="merchantInfoObj2.balance" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证" >
          <el-input v-model="merchantInfoObj2.idCard" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" >
          <el-input v-model="merchantInfoObj2.phone" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="门店照片" >
          <el-input v-model="merchantInfoObj2.shopImg" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="门店名称" >
          <el-input v-model="merchantInfoObj2.shopName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" >
          <el-input v-model="merchantInfoObj2.detailAddress" :disabled="true">
          </el-input>
        </el-form-item>
        <el-form-item label="门店营业状态">
          <el-select v-model="merchantInfoObj2.onOff" :disabled="true">
            <el-option :value="1" label="营业"></el-option>
            <el-option :value="0" label="歇业"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间" >
          <el-date-picker
              v-model="merchantInfoObj2.createDate"
              type="datetime"
              placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核人" >
          <el-input v-model="merchantInfoObj2.checker" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="审核时间" >
          <el-date-picker
              v-model="merchantInfoObj2.checkerTime"
              type="datetime"
              placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核理由" >
          <el-input v-model="merchantInfoObj2.checkReason" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Merchant",
  data() {
    return {
      merchantInfoObj2:{
        merchantId:null,
      },
      merchantInfoObj1: {
        merchantId: null,
      },
      merchantInfoAry: [],
      // 当前页号
      pageNo: 1,
      // 当前页大小
      pageSize: 5,
      // 总记录数
      total: 0,
      // 页大小列表
      pageSizeList: [2, 5, 10, 20],
      ary: [],
      rebactVisible: false,
      lookVisible:false,
      merchantInfo: {
        name: "",
        shopName: "",
      },
    }
  },
  methods: {
    // 页大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.queryMerchantInfo()
    },
    // 页号改变
    handleCurrentChange(val) {
      this.pageNo = val
      // 重新查询
      this.queryMerchantInfo()
    },
    //分页查询商户信息
    async queryMerchantInfo() {
      const { data: res } = await this.$http.post
      (`/merchantInfo/queryAll/${this.pageNo}/${this.pageSize}`, this.merchantInfo);
      console.log('res', res);
      this.merchantInfoAry = res.list;
      this.total = res.total;
    },
    selBtn() {
      this.queryMerchantInfo()
    },
    //查看详细信息对话框
    look(row) {
      this.merchantInfoObj2=row
      this.lookVisible=true
    },
    //编辑按钮
    rebact(id) {
      this.merchantInfoObj1 = id;
      this.rebactVisible = true
    },
    async rebactOk(){
      await this.$http.post(`/merchantInfo/updById/`,this.merchantInfoObj1);
      this.$message.success("编辑成功")
    },

    //删除
    delMer(row){

      //弹出问框
      this.$confirm('确认要删此信息吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        //确定
        const { data: res } = await this.$http.post(`/merchantInfo/delByMerchantId`,row);
        this.$message.success(res);
        //界面刷新
        this.selBtn();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
  },
  mounted() {
    this.queryMerchantInfo()
  }
}
</script>

<style scoped>

</style>